<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport"
	content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

<title>地址管理</title>

<link href="../../js/AmazeUI-2.4.2/assets/css/admin.css"
	rel="stylesheet" type="text/css">
<link href="../../js/AmazeUI-2.4.2/assets/css/amazeui.css"
	rel="stylesheet" type="text/css">

<link href="../../css/personal.css" rel="stylesheet" type="text/css">
<link href="../../css/addstyle.css" rel="stylesheet" type="text/css">
<script src="../../js/AmazeUI-2.4.2/assets/js/jquery.min.js"
	type="text/javascript"></script>
<script src="../../js/AmazeUI-2.4.2/assets/js/amazeui.js"></script>
<script src="../../js/vue/vue.min.js"></script>
<script src="../../js/layer/layer.js" charset="utf-8"></script>
<script src="../../js/area.js" charset="utf-8"></script>

<style type="text/css">
	body{ background:#EEEEEE;margin:0; padding:0; font-family:"微软雅黑", Arial, Helvetica, sans-serif; }
	a{ color:#006600; text-decoration:none;}
	a:hover{color:#990000;}
	.top{ margin:5px auto; color:#990000; text-align:center;}
	.info select{ border:1px #993300 solid; background:#FFFFFF;}
	.info{ margin:5px; text-align:center;}
	.info #show{ color:#3399FF; }
	.bottom{ text-align:right; font-size:12px; color:#CCCCCC; width:1000px;}
</style>
</head>

<body>
	<!--头 -->
	<header>
		<article>
			<div class="mt-logo">
				<div class="clear"></div>
			</div>
			</div>
		</article>
	</header>
	<b class="line"></b>

	<div class="center">
		<div class="col-main">
			<div class="main-wrap">

				<div class="user-address">

					<div class="" id="doc-modal-1">

						<div class="add-dress">

							<!--标题 -->
							<div class="am-cf am-padding">
								<div class="am-fl am-cf">
									<strong class="am-text-danger am-text-lg">新增地址</strong> / <small>Add&nbsp;address</small>
								</div>
							</div>
							<hr />
							<input type="hidden" id="user-id" name="user-id" value="${address.userId}">
							<div class="am-u-md-12 am-u-lg-8" style="margin-top: 20px;">
								<form class="am-form am-form-horizontal" id="addUserForm">

									<div class="am-form-group">
										<label for="user-name" class="am-form-label">收货人</label>
										<div class="am-form-content">
											<input type="text" name="user-name" id="user-name"
												placeholder="收货人">
										</div>
									</div>

									<div class="am-form-group">
										<label for="user-phone" class="am-form-label">手机号码</label>
										<div class="am-form-content">
											<input name="user-phone" id="user-phone" placeholder="手机号必填"
												type="email">
										</div>
									</div>
								<div class="am-form-group">
									<label for="user-address" class="am-form-label">所在地</label>
									<div class="am-form-content address" id="">
										<select id="s_province" name="s_province"></select>
										<select id="s_city" name="s_city"></select>			
										<select id="s_county" name="s_county"></select>		
										<script type="text/javascript">_init_area();</script>
									</div>
								    <div id="show"></div>
								</div>
								<script type="text/javascript">
								var Gid  = document.getElementById ;
								var showArea = function(){
									Gid('show').innerHTML = "<h3>省" + Gid('s_province').value + " - 市" + 	
									Gid('s_city').value + " - 县/区" + 
									Gid('s_county').value + "</h3>"
															}
								Gid('s_county').setAttribute('onchange','showArea()');
								</script>
								
									<div class="am-form-group">
										<label for="user-intro" class="am-form-label">详细地址</label>
										<div class="am-form-content">
											<textarea class="" rows="3" name="user-intro" id="user-intro"
												placeholder="输入详细地址"></textarea>
											<small>50字以内写出你的详细地址...</small>
										</div>
									</div>

									<div class="am-form-group">
										<div class="am-u-sm-9 am-u-sm-push-3">
											<button type="button" id="saveBtn" class="am-btn am-btn-danger">保存</button>
											<button type="button" id="cancelBtn" class="am-btn am-btn-danger"  data-am-modal-close>取消</button>
										</div>
									</div>
								</form>
							</div>

						</div>

					</div>

				</div>
			</div>
		</div>

	</div>

</body>
<script>
	var addAddress = function() {
		/*
		if (!validform().form()) {
			return;
		}
		 */
		$.ajax({
			type : "POST",
			dataType : "json",
			url : "/address/add",//用的是异步提交add页面而不是表单提交页面
			data : {//页面传值
				"receiveName" : $("#user-name").val(),
				"phone" : $("#user-phone").val(),
				"address" :[$("#s_province").val(),$("#s_city").val(),$("#s_county").val()],
				"userId" : $("#user-id").val(),
				"detailAddress" : $("#user-intro").val()
			},
			success : function(msg) {
				alert(msg);
				$('#cancelBtn').click(); //当添加成功，不再添加用户后，点击取消按钮，关闭弹出层		
			}
		});
	}

	$('#saveBtn').on('click', function() {
		addAddress();//调用添加函数,可以多次添加，直到点击取消按钮，结束添加用户
	});

	$('#cancelBtn').on('click', function() {//关闭弹出层后并显示刷新列表
		var index = parent.layer.getFrameIndex(window.name);
		
		parent.layer.close(index);
		parent.showAddressList();
	});
</script>

</html>